<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="独狼">
    <title></title>
    <script src='vue.js'></script>
    <script src="./vue-router.js"></script>
    <style>
      
        ul{
            list-style: none;
            float: left;
        }
        ul>li{
            height: 90px;
        }
        .aa{
            float:left;
        }
    </style>
</head>

<body>
    <div id='app'>
   
     <ul>
           <li> <router-link to="/shou">首页</router-link> </li>
           <li> <router-link to="/kai">开发管理</router-link> </li>
           <li> <router-link to="/yong">用户身份</router-link> </li>
           <li> <router-link to="/shu">数据分析</router-link> </li>
           <li> <router-link to="/mo">模板消息</router-link> </li>
           <li> <router-link to="/ke">客服消息</router-link> </li>
           <li> <router-link to="/fu">附近的小程序</router-link> </li>
           <li> <router-link to="/she">设置</router-link> </li>

           
      </ul>
     
      
       <router-view></router-view>
    </div>
    <script>
        const shou = {
            template: `<div class="aa"><h1>首页</h1></div>`,
        }
         const kai = {
            template: `<div class="aa"><h1>开发管理</h1></div>`,
        }
         const yong = {
            template: `<div class="aa"><h1>用户身份</h1></div>`,
        }
         const shu = {
            template: `<div class="aa"><h1>数据分析</h1></div>`,
        }
         const mo = {
            template: `<div class="aa"><h1>模板消息</h1></div>`,
        }
         const ke = {
            template: `<div class="aa"><h1>客服消息</h1></div>`,
        }
         const fu = {
            template: `<div class="aa"><h1>附近的小程序</h1></div>`,
        }
         const she = {
            template: `<div class="aa">
                            <h1>设置</h1>
                             <p>
                                <router-link to="/she/jiben">基本设置</router-link>
                                <router-link to="/she/kaifa">开发设置</router-link>
                                <router-link to="/she/disan">第三方授权</router-link>
                            </p>
                            <router-view></router-view>
                        </div>`,
        }
        // -----------------222
          const jiben = {
            template: `<div><h1>基本设置</h1></div>`,
        }
          const kaifa = {
            template: `<div><h1>开发设置</h1></div>`,
        }
          const disan = {
            template: `<div><h1>第三方授权</h1></div>`,
        }

        const router = new VueRouter({
            routes: [
                {path: "/shou",component: shou},
                {path: "/kai",component: kai},
                {path: "/yong",component: yong},
                {path: "/shu",component: shu},
                {path: "/mo",component: mo},
                {path: "/ke",component: ke},
                {path: "/fu",component: fu},
                {
                    path: "/she",
                component: she,
                    children:[
                        {path: "jiben",component: jiben},
                        {path: "kaifa",component: kaifa},
                        {path: "disan",component: disan},
                ]
            },

                ]
        })
        new Vue({
            el: '#app',
            data: {
                first: ['首页', '开发管理', '用户身份', '数据分析', '模板消息', '客服消息', '附近的小程序', '设置']
            },
            router
        })
    </script>
</body>
<html>